import { useState } from "react"
/**
 * 兄弟组件通信
 * 【说明】：通过状态提升实现兄弟组件通信、
 * 【状态提升】：兄弟组件之间传值，可以通过状态提升，所谓状态提升就是将状态提升到共同父组件、通过父组件做一个桥接
 *              完成兄弟组件的同学
 * 【实现步骤】：1、Bros1组件通过子传父的方式，将数据传递给父组件
 *              2、父组件在通过父传子的方式将数据传递给Bros2
 */

function Bros1({ onBrosEvent }) {
  // 步骤三：解构父组件传递过来的自定义事件
  let data = 100
  return (
    <div>兄弟1：
      {/* 步骤四：通过点击事件，调用父组件传递过来的事件、并将数据通过形参的方式传递过去 */}
      <button onClick={() => onBrosEvent(data)}>Bros1</button>
    </div>
  )
}

function Bros2(props) {
  // 步骤七：组件传递过来的数据，保存在形参列表中props中，通过props.进行获取
  return (
    <div>兄弟2：{props.data}</div>
  )
}
function Brother() {
  const [data, setData] = useState(null)
  // 步骤一：在父组件创建useState函数、用于管理子组件传递过来的数据、因为要通过父组件来实现兄弟组件之间的通信
  const BrosEvent = (data) => {
    // 步骤五：当子组件调用该函数时，会通过形参列表将数据传递过来、并通过useState将数据进行管理
    setData(data) // 将数据赋值给useState所管理的data
  }
  return (
    <div>
      父组件：{data}
      {/* 步骤二：自定义事件onBrosEvent 通过自定义事件将BrosEvent 传递给子组件Bros1 */}
      <div><Bros1 onBrosEvent={BrosEvent}></Bros1></div>
      {/* 步骤六：将useState管理的data通过父传子的方式传递给Bros2子组件 */}
      <div><Bros2 data={data}></Bros2></div>
    </div>
  )
}


export default Brother